<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>品牌列表</title>
    <!--引入vue.js-->
    <script src="js/vue.js"></script>

    <!--引入 element js css-->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="element-ui/lib/index.js"></script>

    <script src="js/axios-0.18.0.js"></script>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
<div id="app">
    <el-table
            :data="tableData"
            style="width: 100%"
            :row-class-name="tableRowClassName">
        <el-table-column
                prop="name"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="pwd"
                label="密码"
                width="180">
        </el-table-column>
    </el-table>

</div>


<script>
    new Vue({
        el: "#app",
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            }
        },
        data:{
            tableData: [{
                name:"zs",
                pwd:"123"
            }, {
                name:"ls",
                pwd:"234"
            }]
        },
        mounted:function (){
            //发送异步请求，查询用户列表数据
            axios.get("/user")
            .then(data=>{
                let users = data.data;
                this.tableData = users;
            });
        }
    });
</script>
</body>
</html>